<!-- 顶部 navbar -->
<template>
  <view class="mt-navbar">
    <uv-navbar
      :placeholder="placeholder"
      :fixed="fixed"
      :border="border"
      :bg-color="bgColor"
      :left-icon="showBack ? 'arrow-left' : ''"
      :left-icon-color="leftIconColor"
      :left-icon-size="leftIconSize"
      @left-click="back"
    >
      <template #left>
        <slot name="left"></slot>
      </template>
      <template #center>
        <slot name="center">
          <view class="mt-navbar_default_center" :style="{ ...titleStyle, width: titleWidth }">
            <view class="ellipsis">
              {{ title }}
            </view>
          </view>
        </slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </uv-navbar>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '2'
  },
  bgColor: {
    type: String,
    default: '#ffffff'
  },
  placeholder: {
    // 固定在顶部时，是否生成一个等高元素，以防止塌陷
    type: Boolean,
    default: true
  },
  fixed: {
    // 是否固定在顶部
    type: Boolean,
    default: true
  },
  showBack: {
    // 是否显示左侧返回箭头
    type: Boolean,
    default: true
  },
  intercept: {
    // 是否拦截返回按钮
    type: Boolean,
    default: false
  },
  border: {
    // 导航栏底部是否显示下边框
    type: Boolean,
    default: false
  },
  titleWidth: {
    // 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位 rpx
    type: String,
    default: '500rpx'
  },
  leftIconColor: {
    type: String,
    default: '#1C213E'
  },
  leftIconSize: {
    type: String,
    default: '18px'
  },
  titleStyle: {
    // 导航栏标题的样式
    type: Object,
    default: () => {
      return {};
    }
  }
});
function back() {
  if (!props.showBack) return;
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.mt-navbar {
  :deep(.uv-navbar) {
    .uvicon-arrow-left {
      font-weight: bold !important;
      margin-top: 2px;
    }
  }
  .mt-navbar_default_center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #1c213e;
    font-weight: bold;
  }
}
</style>
